<template>
	<view class="page_wrapper">
		<view class="first_block">
			<view class="first_row">
				<view class="use_time">{{useTimeTxt}}</view>
				<view class="current_calc">{{currentCalcInx + 1}} / {{totalCount}}</view>
			</view>
			<view class="second_row">
				<view class="calc_detail">
					{{currentCalc.firstNum}} {{currentCalc.calcType}} {{currentCalc.secondNum}} = 
				</view>
				<view class="result">
					{{currentResult}}
				</view>
			</view>
		</view>
		<view class="center_block"></view>
		<view class="bottom_block">
			<view class="nums_block">
				<view class="left_block">
					<view class="up_block">
						<view class="sub_left_block">
							<view class="key num pre_calc" @tap="toPreCalc()">上一题</view>
						</view>
						<view class="sub_right_block">
							<view class="key num" @tap="keyDown('1')">1</view>
							<view class="key num" @tap="keyDown('2')">2</view>
							<view class="key num" @tap="keyDown('3')">3</view>
							<view class="key num" @tap="keyDown('4')">4</view>
							<view class="key num" @tap="keyDown('5')">5</view>
							<view class="key num" @tap="keyDown('6')">6</view>
							<view class="key num" @tap="keyDown('7')">7</view>
							<view class="key num" @tap="keyDown('8')">8</view>
							<view class="key num" @tap="keyDown('9')">9</view>
						</view>
					</view>
					<view class="down_block">
						<view class="key num zero" @tap="keyDown('0')">0</view>
						<view class="key num" @tap="keyDown('.')">.</view>
					</view>
				</view>
				<view class="right_block">
					<view class="key num backspace" @tap="keyDown('-1')">退格</view>
					<view class="key next_one" @tap="nextCalc()">下 一 题</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	export default {
		data() {
			return {
				running: false,
				examId: 0,
				currentCalcInx: 0,
				calcList: [],
				currentCalc: {},
				totalCount: 0,
				currentResult: '0',
				audioContext: null,
				timer: null,
				useTime: 0,
				useTimeTxt: '00:00'
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.degreeLevel = option.degreeLevel
			console.log(this.degreeLevel)
			if(this.degreeLevel){
				this.fetchTodayExam()
			}else if(this.examId) {
				this.fetchData()
			} 
		},
		watch: {
			useTime(newValue, oldValue) {
				this.useTimeTxt = utils.int2Time(newValue)
			}
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					`/mathExams/id,${this.examId}`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.calcList = res.calcLogList
					this.totalCount = this.calcList.length
					this.currentCalc = this.calcList[this.currentCalcInx]
					let $this = this
					this.timer = setInterval(() => {
						$this.useTime++
					}, 1000)
					
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			fetchTodayExam() {
				uni.showLoading()
				request.post( 
					`/mathExams/degreeLevel,${this.degreeLevel}/today`, {}
				).then(res => {
					uni.hideLoading()
					console.log(res)
					this.examId = res.id
					this.calcList = res.calcLogList
					this.totalCount = this.calcList.length
					this.currentCalc = this.calcList[this.currentCalcInx]
					let $this = this
					this.timer = setInterval(() => {
						$this.useTime++
					}, 1000)
					
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			toPreCalc() {
				console.log('上一题')
				if( this.currentCalcInx -1 < 0){
					uni.showToast({ icon: 'none', title: '已经是第一题了' })
					return false
				}else {
					this.currentCalcInx--
					this.currentCalc = this.calcList[this.currentCalcInx]
					this.currentResult = this.currentCalc.myResult
				}
			},
			nextCalc() {
				// 判断结尾是不是有小数点
				const inx = this.currentResult.indexOf('.')
				if(inx >= 0 && inx === (this.currentResult.length - 1)) {
					// 存在. 并且在最后
					this.currentResult = this.currentResult.substring(0, this.currentResult.length -1)
				}
				// 保存当前答案
				this.calcList[this.currentCalcInx].myResult = this.currentResult
				if(this.currentCalcInx === (this.totalCount-1)){
					// 答题结束 保存结果
					uni.showLoading()
					const data = {
						'useTime': this.useTime,
						'calcList': JSON.stringify(this.calcList),
						'resultImg': '',
						'examType': 'online'
					}
					request.putJson(
						'/mathExams/id,' + this.examId + '/result', data
					).then(res => {
						uni.hideLoading()
						console.log(res)
						// 跳转到结果页面
						uni.redirectTo({
							url: '/pages/mathCalcs/onlineFinished/onlineFinished?examId=' + this.examId
						})
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
					
				}else{
					this.currentCalcInx++
					this.currentCalc = this.calcList[this.currentCalcInx]
					this.currentResult = '0'
				}
				console.log(this.currentResult)
			},
			keyDown(val) {
				console.log(val)
				this.playClickMusic()
				if(val === '.' && this.currentResult.indexOf('.') >= 0) {
					return false
				}
				if(this.currentResult.indexOf('.') >= 0 && val !== '-1') {
					const startIndex = this.currentResult.indexOf('.')
					const len = this.currentResult.substring(startIndex+1)
					console.log(len)
					if(len.length >= 2) {
						uni.showToast({
							icon: 'none',
							title: '小数点后最多两位~'
						})
						return false
					}
				}
				if(this.currentResult.length > 5 && val !== '-1'){
					uni.showToast({
						icon: 'none',
						title: '值没有这么大~'
					})
					return false
				}
				if(val === '-1') {
					this.currentResult = this.currentResult.substring(0 , this.currentResult.length -1)
				} else {
					if(this.currentResult === '0' && val !== '.') {
						this.currentResult = val
					} else {
						this.currentResult = this.currentResult + val
					}
				}
				
				if(this.currentResult.length === 0) {
					this.currentResult = '0'
				}
				console.log(this.currentResult)
			},
			playClickMusic() {
				// const audioContext = uni.createInnerAudioContext()
				// audioContext.autoplay = true
				// audioContext.src = '/static/music/click.mp3'
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.first_block{
			margin: 5px 15px;
			height: 170px;
			display: flex;
			flex-direction: column;
			background-color: lightslategray;
			border-radius: 5px;
			color: white;
			.first_row{
				width: 100%;
				font-size: 16px;
				display: flex;
				justify-content: space-evenly;
				.use_time{
					width: 130px;
					height: 36px;
					line-height: 36px;
					font-size: 17px;
					font-weight: 500;
					text-align: center;
					background-color: #f3a73f;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
				}
				.current_calc{
					font-size: 15px;
					font-weight: 400;
					height: 36px;
					line-height: 36px;
				}
			}
			.second_row{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				.calc_detail{
					font-size: 30px;
				}
				.result{
					font-size: 30px;
					color: #333333;
					height: 44px;
					width: 130px;
					background-color: white;
					margin-left: 30px;
					border-radius: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow-x: auto;
				}
			}
		}
		.center_block{
			flex: 1;
		}
		.bottom_block{
			height: 230px;
			background-color: aliceblue;
			display: flex;
			.nums_block{
				flex: 1;
				display: flex;
				padding: 10px 20px;
				.num{
					font-size: 17px;
					width: 30%;
					height: 40px;
					line-height: 40px;
					text-align: center;
					border-radius: 18px;
					border: 1px solid #e2e2e2;
					background-color: white;
					margin: 5px 1%;
				}
				.key:active{
					background-color: #f3a73f;
				}
				.left_block{
					flex: 0.8;
					display: flex;
					flex-direction: column;
					padding: 7px 5px 7px 0px;
					.up_block{
						flex: 0.75;
						display: flex;
						.sub_left_block{
							width: 70px;
							display: flex;
							padding-right: 5px;
							padding-bottom: 10px;
							.pre_calc{
								flex: 1;
								height: 100%;
								font-size: 15px;
								color: #444444;
								font-size: 14px;
								border: 1px solid #e2e2e2;
								background-color: white;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
						.sub_right_block{
							flex: 1;
							display: flex;
							flex-wrap: wrap;
						}
					}
					.down_block{
						flex: 0.25;
						display: flex;
						flex-wrap: wrap;
						.zero{
							width: 62%;
						}
					}
					
				}
				.right_block{
					flex: 0.2;
					flex-direction: column;
					display: flex;
					padding-bottom: 7px;
					.backspace{
						width: 96%;
						height: 40px;
						font-size: 15px;
						color: #444444;
						font-size: 14px;
					}
					.next_one{
						flex: 1;
						color: white;
						width: 96%;
						line-height: 40px;
						text-align: center;
						border-radius: 18px;
						border: 1px solid #e2e2e2;
						background-color: #f3a73f;
						margin-top: 5px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				
			}
		}
	}

</style>
